<template>
  <!-- 折线图组件 -->
  <div id="main" ref="barEchart" class="barEchart" style="width:400px;height:400px" />
</template>
<script>
// import macarons from './macarons'
// import * as echarts from 'echarts'
export default {
  name: 'Linechart',
  data() {
    return {
      property: 'value'
    }
  },
  mounted() {
    this.drawChart()
  },
  methods: {
    drawChart() {
      //   准备好DOM 初始化 echart 实例
    //   var myChart = this.$echarts.init(document.getElementById('main'))
      // 同一个页面使用多次会出现数据覆盖的问题 只会显示一个页面 解决方法使用ref
      // 在init 方法内置中有两套主题 light  和dark
      const myChart = this.$echarts.init(this.$refs.barEchart)
      //   绘制图标
      myChart.setOption({
        animation: true, // 开启动画
        //   设置动画的时长
        // animationDuration: 7000,
        // 动画函数
        // animationDuration: function(arg) {
        // //   console.log(arg)
        //   return 2000 * arg
        // },

        // animationEasing: 'linear', // 缓动动画
        // animationEasing: 'bounceOut', // 会弹动画
        // animationThreshold: 10, 动画的阈值
        grid: { // 控制图表的上下左右坐标
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        //   show: true // 显示直角坐标系的
        //   borderWidth: 10,
        //   borderColor: 'red'
        },
        xAxis: {
          type: 'category',
          data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: 'line',
            smooth: true
          }
        ],
        toolbox: {
          feature: {
            saveAsImage: {}, // 导出图片
            dataView: {}, // 数据视图
            restore: {}, // 还原
            dataZoom: {}, // 区域缩放
            magicType: {
              type: ['bar', 'line']
            }//

          }
        }

      })
      // 监听 window窗口大小变化的事件 自适应
      window.onresize = function() {
        // console.log('屏幕变化了')
        myChart.resize()
      }
    }
  }
}
</script>

